<template>
	<view class="pagesBox">
		<view class="statusBox">
			<view class="imageBox">
				<image v-if="orderDetail.status == 0" :src="`${baseUrl}/static/my/icon01.png`" style="width: 70rpx;height: 70rpx;"></image>
				<image v-if="orderDetail.status == 1" :src="`${baseUrl}/static/my/icon02.png`" style="width: 70rpx;height: 70rpx;"></image>
				<image v-if="orderDetail.status == 2" :src="`${baseUrl}/static/my/icon03.png`" style="width: 70rpx;height: 70rpx;"></image>
				<!-- <image v-if="orderDetail.status == 3" :src="`${baseUrl}/static/my/icon11.png`" style="width: 70rpx;height: 70rpx;"></image> -->
				<image v-if="orderDetail.status == 4" :src="`${baseUrl}/static/my/icon04.png`" style="width: 70rpx;height: 70rpx;"></image>
			</view>
			<view class="statusMain">
				<view v-if="orderDetail.status == 0" class="statusType">待付款</view>
				<view v-if="orderDetail.status == 1" class="statusType">待发货</view>
				<view v-if="orderDetail.status == 2" class="statusType">待收货</view>
				<view v-if="orderDetail.status == 3" class="statusType">已完成</view>
				<view v-if="orderDetail.status == 4" class="statusType">
					售后申请
					<text v-if="orderDetail.refund_apply == 1">审核中</text>
					<!-- <text v-if="orderDetail.refund_apply == 2">处理中</text> -->
					<text v-if="orderDetail.refund_apply == 2">通过</text>
					<text v-if="orderDetail.refund_apply == 3">驳回</text>
				</view>
				<view v-if="orderDetail.status == 5" class="statusType">订单取消</view>
				<!-- <view v-if="orderDetail.status == 1" class="statusBottom u-line-1">卖家承诺下单后48小时内发货</view> -->
				<!-- <view v-if="orderDetail.status == 2" class="statusBottom u-line-1">订单将在6天18小时后自动收货</view> -->
				<view class="statusBottom u-line-1">{{orderDetail.status_describe}}</view>
				<!-- <view v-if="orderDetail.status == 4 && orderDetail.refund_apply == 1" class="statusBottom u-line-1">请您耐心等待，我们正在加急处理您的订单</view> -->
			</view>
		</view>
		<view class="addressBox" v-if="orderDetail.is_shareholding != 1 && orderDetail.id">
			<!-- <image  :src="`${baseUrl}/static/index/bg08.png`" mode="widthFix" style="width: 100%;height: 144rpx;"></image> -->
			<view class="addressMain">
				<view class="addressInfoBox">
					<view class="imageBox">
						<image  :src="`${baseUrl}/static/index/address.png`" style="width: 64rpx;height: 64rpx;"></image>
					</view>
					<view class="infoMain">
						<view class="infoTop">
							<view class="infoName">{{orderDetail.consignee_name}}</view>
							<view class="infoPhone">{{orderDetail.consignee_phone}}</view>
						</view>
						<view class="infoBottom u-line-2">{{orderDetail.address_detail}}</view>
					</view>
				</view>
				<!-- <view class="addressIcon" v-if="orderDetail.status == 1"><uni-icons type="right" size="14" color="#A1A5AA"></uni-icons></view> -->
			</view>
		</view>
		<view class="goodsBox">
			<block v-for="(item,index) in orderDetail.goods" :key="index">
				<view class="goodsItem">
					<view class="goodsImage">
						<image :src="item.goods_image" style="width: 176rpx;height: 176rpx;"></image>
					</view>
					<view class="goodsDetail">
						<view class="infoName u-line-3">{{item.goods_name}}</view>
						<view class="infoBottom">
							<view class="buyNum">{{item.goods_spec}} x {{item.goods_num}}</view>
							<view class="goodsMoney"><text style="font-size: 32rpx;">￥{{item.goods_money}}</text></view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="workInfoBox">
			<view class="lineBox">
			    <view class="lineLeft">订单号</view>
			    <view class="lineRight">{{orderDetail.order_sn}}</view>
			</view>
			<view class="lineBox">
			    <view class="lineLeft">下单账号</view>
			    <view class="lineRight">{{orderDetail.account}}</view>
			</view>
			<view class="lineBox">
			    <view class="lineLeft">下单时间</view>
			    <view class="lineRight">{{orderDetail.time}}</view>
			</view>
			<view class="lineBox">
			    <view class="lineLeft">支付方式</view>
			    <view class="lineRight" v-if="orderDetail.pay_type * 1 == 1">微信支付</view>
				<view class="lineRight" v-if="orderDetail.pay_type * 1 == 2">积分支付</view>
			</view>
			<view class="lineBox" v-if="orderDetail.remake != null">
			    <view class="lineLeft">备注</view>
			    <view class="lineRight">{{orderDetail.remake || "无"}}</view>
			</view>
			<view class="lineBox" v-if="orderDetail.refund_apply != 0">
			    <view class="lineLeft">售后申请类型</view>
			    <view class="lineRight" v-if="orderDetail.refund_type == 1">退货退款</view>
				<view class="lineRight" v-if="orderDetail.refund_type == 2">换货</view>
				<view class="lineRight" v-if="orderDetail.refund_type == 3">货物破损</view>
			</view>
			<view class="lineBox" v-if="orderDetail.refund_apply == 4">
			    <view class="lineLeft">售后回复</view>
			    <view class="lineRight">{{orderDetail.refund_reason}}</view>
			</view>
		</view>
		<view style="height: calc(135rpx + env(safe-area-inset-bottom));" v-if="orderDetail.status != 5"></view>
		<view class="submitBox" v-if="orderDetail.status != 5">
			<view style="display: flex;align-items: center;">
				<view class="numTotal">
					<view>订单合计</view>
					<text class="numA"><text class="num">￥{{orderDetail.money}}</text></text>
				</view>
			</view>
			<view class="btnBox">
				<view class="btn" hover-class="hoverBtn" v-if="orderDetail.status == 0" @click="orderCancel()">取消订单</view>
				<view class="btn" hover-class="hoverBtn" v-if="orderDetail.status == 0" @click="submitBefore()">立即支付</view>
				<!-- <view class="btn" hover-class="hoverBtn" v-if="orderDetail.status == 1" @click="orderRefund()">退款</view> -->
				<view class="btn btn1" hover-class="hoverBtn" v-if="orderDetail.status == 2" @click="afterSales()">申请售后</view>
				<view class="btn btn1" hover-class="hoverBtn" v-if="orderDetail.status == 2" @click="toLogistics()">查看物流</view>
				<view class="btn btn1" hover-class="hoverBtn" v-if="orderDetail.status == 2" @click="orderReceive()">确认收货</view>
				<!-- <view class="btn" hover-class="hoverBtn" v-if="orderDetail.status == 4 && orderDetail.refund_apply == 1" @click="afterCancel()">取消售后</view> -->
			</view>
		</view>
		<u-picker mode="time" v-model="show" :params="paramsTime" @confirm="confirm" :default-time="orderDetail.extend_send || orderDetail.send_time"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl:this.$baseUrl,
				orderDetail:{},
				params:{
					beizhu:'',
					coupon_id:''
				},
				couponMoney:10,
				daoTime:'',
				cancel_time:'',
				cancel_second:0,
				time:'',
				// 时间弹出框
				show:false,
				paramsTime:{
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				}
			};
		},
		onLoad(options) {
			this.id = options.id;
		},
		onShow() {
			this.getDetail()
		},
		methods:{
			async getDetail(){
				let res = await uni.$http('POST','order/detail',{id:this.id});
				if(res.code == 1){
					this.orderDetail = res.data;
					this.cancel_second = res.data.cancel_second;
					// if(res.data.status == 0){
					// 	let minute = parseInt(this.cancel_second / 60);
					// 	let num = this.cancel_second % 60;
					// 	this.cancel_time = minute + '分钟' + num +'秒';
					// 	if(minute == 0 && num == 0){
					// 		clearInterval(this.daoTime);
					// 		this.daoTime = '';
					// 		this.getDetail()
					// 	}
					// 	this.daoTime = setInterval(()=>{
					// 		this.cancel_second--
					// 		let minute = parseInt(this.cancel_second / 60);
					// 		let num = this.cancel_second % 60;
					// 		this.cancel_time = minute + '分钟' + num +'秒';
					// 		if(minute == 0 && num == 0){
					// 			clearInterval(this.daoTime);
					// 			this.daoTime = '';
					// 			this.getDetail(this.id)
					// 		}
					// 	},1000) 
					// }
				}else{
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
					uni.$u.toast(res.msg)
				}
			},
			submitBefore(){
				if(this.time){
					clearTimeout(this.time)
					this.time = '';
				}
				uni.showLoading({
					title:"加载中",
					mask:true
				})
				this.time = setTimeout(()=>{
					this.submit()
				},700)
			},
			async submit(){
				let res = await uni.$http('POST','order/orderPay',{id:this.orderDetail.id});
				uni.hideLoading()
				if(res.code == 1){
					if(!res.data.timeStamp){
						let ress = await uni.$http('POST','order/isPay',{id:res.data.orders_id});
						if(ress.code == 1){
							this.getDetail(this.id)
						}else if(ress.code == 2){
							uni.$u.toast('支付失败')
						}
					}else{
						uni.requestPayment({
							provider: "wxpay",
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: async res1 => {
								let ress = await uni.$http('POST','order/isPay',{id:res.data.orders_id});
								if(ress.code == 1){
									this.getDetail(this.id)
								}else if(ress.code == 2){
									uni.$u.toast('支付失败')
								}
							}
						})
					}
				}else{
					uni.$u.toast(res.msg)
				}
			},
			// 订单取消
			async orderCancel(){
				let res = await uni.$http('POST','order/orderCancel',{id:this.orderDetail.id});
				uni.$u.toast(res.msg)
				if(res.code == 1){
					this.getDetail(this.id)
				}
			},
			// 未发货退单
			async orderRefund(){
				let res = await uni.$http('POST','order/refund',{id:this.orderDetail.id});
				uni.$u.toast(res.msg)
				if(res.code == 1){
					this.getDetail(this.id)
				}
			},
			// 确认收货
			async orderReceive(){
				uni.showModal({
					title: '提示',
					content: '确认收货后订单完成不可售后，是否确认',
					cancelText:"否",
					success: async (res)=> {
						if (res.confirm) {
							let res = await uni.$http('POST','order/orderReceive',{id:this.orderDetail.id});
							uni.$u.toast(res.msg)
							if(res.code == 1){
								this.getDetail(this.id)
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 取消售后
			async afterCancel(){
				let res = await uni.$http('POST','order/afterCancel',{id:this.orderDetail.id});
				uni.$u.toast(res.msg)
				if(res.code == 1){
					this.getDetail(this.id)
				}
			},
			async confirm(e){
				console.log(e);
				let time = e.year+'-'+e.month+'-'+e.day
				let res = await uni.$http('POST','order/extend_send',{id:this.orderDetail.id,extend_send:time});
				uni.$u.toast(res.msg)
				if(res.code == 1){
					this.getDetail(this.id)
				}
			},
			changeTime(){
				if(this.orderDetail.status == 1 && !this.orderDetail.extend_send){
					this.show = true;
				}
			},
			afterSales(){
				uni.navigateTo({
					url:"/pagesMy/order/afterSales?id="+this.orderDetail.id+'&status='+this.orderDetail.status
				})
			},
			sumTotal(num1,num2,num3,num4){
				return parseFloat(num1*1 + num2*1 + num3*1 + num4*1).toFixed(2)
			},
			toAddressList(){
				if(this.orderDetail.status == 1){
					uni.navigateTo({
						url:"/pagesShare/address/list?comePage=orderList&orderId="+this.orderDetail.id
					})
				}
			},
			toLogistics(){
				uni.navigateTo({
					url:"/pagesMy/order/logistics?id="+this.orderDetail.id
				})
			}
		},
		onHide() {
			clearInterval(this.daoTime);
			this.daoTime = '';
		}
	}
</script>

<style scoped lang="scss">
.pagesBox{
	padding: 12rpx 24rpx;
	.statusBox{
		background-color: #fff;
		border-radius: 16rpx;
		padding: 16rpx;
		margin-bottom: 24rpx;
		display: flex;
		align-items: center;
		.imageBox{
			font-size: 0%;
			margin-right: 16rpx;
		}
		.statusMain{
			.statusType{
				font-weight: 600;
				font-size: 32rpx;
				color: #000;
			}
			.statusBottom{
				font-weight: 400;
				font-size: 24rpx;
				color: #A1A5AA;
				margin-top: 8rpx;
			}
		}
		.tipBox{
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			letter-spacing: 2rpx;
		}
	}
	.addressBox{
		font-size: 0%;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 16rpx 0;
		position: relative;
		.addressMain{
			padding: 8rpx 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// position: absolute;
			// top: 0%;
			// left: 0%;
			// right: 0%;
			// bottom: 0%;
			.addressInfoBox{
				display: flex;
				align-items: center;
				.imageBox{
					font-size: 0%;
					margin-right: 16rpx;
				}
				.infoMain{
					.infoTop{
						display: flex;
						align-items: center;
						.infoName{
							font-weight: 600;
							font-size: 32rpx;
							color: #000;
						}
						.infoPhone{
							font-weight: 400;
							font-size: 28rpx;
							color: #000;
						}
					}
					.infoBottom{
						font-weight: 400;
						font-size: 24rpx;
						color: #A1A5AA;
						margin-top: 8rpx;
					}
				}
				.tipBox{
					font-weight: 600;
					font-size: 32rpx;
					color: #000;
					letter-spacing: 2rpx;
				}
			}
		}
	}
	.goodsBox{
		background-color: #fff;
		border-radius: 16rpx;
		padding: 16rpx 16rpx 0 16rpx;
		margin-top: 16rpx;
		.goodsItem{
			padding-bottom: 16rpx;
			display: flex;
			align-items: center;
			.goodsImage{
				width: 176rpx;
				font-size: 0%;
				margin-right: 16rpx;
			}
			.goodsDetail{
				flex: 1;
				height: 176rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.infoName{
					font-weight: 400;
					font-size: 28rpx;
					color: #000;
				}
				.infoBottom{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.goodsMoney{
						font-weight: 400;
						font-size: 28rpx;
						color: #2BA777;
					}
					.buyNum{
						font-weight: 400;
						font-size: 24rpx;
						color: #A1A5AA;
					}
				}
			}
		}
	}
	.workInfoBox{
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0 24rpx;
		margin-top: 16rpx;
		.lineBox{
		    font-weight: 400;
		    font-size: 32rpx;
		    color: #16202B;
			padding: 24rpx 0;
		    margin-bottom: 8rpx;
		    display: flex;
			justify-content: space-between;
		    align-items: center;
		    .lineLeft{
		        font-weight: 400;
		        font-size: 28rpx;
		        color: #000;
		    }
		    .lineRight{
		        flex: 1;
				font-weight: 400;
				font-size: 28rpx;
				color: #000;
		        word-break: break-all;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				.imageBox1{
					width: 36rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
		    }
		}
	}
	.submitBox{
		min-height: calc(130rpx + env(safe-area-inset-bottom));
		background-color: #fff;
		padding: 0rpx 30rpx;
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 999;
		// 总计
		.numTotal{
			font-weight: 400;
			font-size: 22rpx;
			color: #000;
			.numA{
				font-weight: 600;
				font-size: 34rpx;
				color: #2BA777;
				.num{
					font-size: 34rpx;
				}
			}
		}
		.btnBox{
			display: flex;
			align-items: center;
			.btn{
				width: 220rpx;
				height: 80rpx;
				font-weight: 600;
				font-size: 30rpx;
				color: #fff;
				background: #2BA777;
				border-radius: 40rpx;
				border: 2rpx solid #2BA777;
				margin-left: 12rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.btn1{
				width: 160rpx;
				height: 70rpx;
				font-size: 26rpx;
				border-radius: 36rpx;
			}
			.hoverBtn{
				background: #37d898;
			}
			.buyBox{
				font-size: 0%;
				margin-left: 12rpx;
				position: relative;
				.buyMain{
					font-weight: 600;
					font-size: 30rpx;
					color: #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					top: 0%;
					right: 0%;
					bottom: 0%;
					left: 0%;
				}
			}
		}
	}
}
</style>
<style>
	page{
		background-color: #f7f8fa;
	}
</style>